<template>
  <div class="menu-bar">
    <el-link
      v-for="(name, path) in menuNames"
      :key="path"
      :href="path"
      :underline="never"
      :class="{ active: $route.path === path || isActivePath(path) }"
      @click.prevent="handleMenuClick(path)"
    >
      {{ name }}
    </el-link>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/api/user';
import { useMenuLineStore } from '@/stores/project/menu-line';
import { computed } from 'vue';

const never = 'never'; // 用于设置链接不显示下划线

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const menuLineStore = useMenuLineStore();

const menuNames = computed<Record<string, string>>(() => {
  try {
    return menuLineStore.getMenuItems;
  } catch (error) {
    ElMessage.error(error);
  }
});

// 处理子路由高亮
const isActivePath = (path: string) => {
  return route.path.includes(path) && path !== '/front';
};

// 处理菜单点击
const handleMenuClick = (path: string) => {
  try {
    router.push(path);
  } catch (error) {
    console.error('MenuLine: 导航失败:', error);
  }
};
</script>

<style scoped>
.menu-bar {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 20px 0;
  background-color: #f5f7fa;
}

.menu-bar .el-link {
  font-size: 16px;
  color: #333;
}

.menu-bar .el-link.active {
  color: #409eff;
  font-weight: bold;
}
</style>